<template>
    <div class="qingwu">
        <div class="admin_table_page_title">
            <a-button @click="$router.back()" class="float_right" icon="arrow-left">返回</a-button>
            标签编辑
        </div>
        <div class="unline underm"></div>
        <div class="admin_form">
            <a-form-model :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
                <a-form-model-item label="名称">
                    <a-input v-model="info.name" placeholder="名称"></a-input>
                </a-form-model-item>

                <a-form-item v-for="(item, index) in info.values" :key="index" label="可选值">
                    <a-input v-model="info.values[index]" placeholder="请输入内容" style="width: 60%; margin-right: 8px"/>
                    <a-icon
                        v-if="info.values.length > 1"
                        class="dynamic-delete-button"
                        type="minus-circle-o"
                        :disabled="info.values.length === 1"
                        @click="remove(index)"
                    />
                    <a-button icon="plus" v-if="info.values.length == index + 1 " @click="add">添加</a-button>
                </a-form-item>

                <a-form-model-item label="是否必选">
                    <a-switch v-model="info.required" @change="required" />
                </a-form-model-item>


                <a-form-model-item label="类型">
                    <a-select @change="type" v-model="info.type">
                        <a-select-option value="radio">单选</a-select-option>
                        <a-select-option value="checkbox">多选</a-select-option>
                    </a-select>
                </a-form-model-item>



                <a-form-model-item :wrapper-col="{ span: 12, offset: 5 }">
                    <a-button type="primary" @click="handleSubmit">提交</a-button>
                </a-form-model-item>
            </a-form-model>

        </div>
    </div>
</template>

<script>
    export default {
        components: {},
        props: {},
        data() {
            return {
                info: {
                    name: '',
                    values: [''],
                    required: 0,
                    type: ''
                },
                id: 0
            };
        },
        watch: {},
        computed: {},
        methods: {
            type(value) {
                this.info.type = value;
            },
            required(checked) {
                checked = checked ? 1 : 0;
                this.info.required = checked
            },
            handleSubmit() {
                let _this = this;
                if (this.$isEmpty(this.info.name)) {
                    return this.$message.error('名称不能为空');
                }

                let api = this.$apiHandle(this.$api.houseOption, this.id);

                if (api.status) {
                    this.$put(api.url, this.info).then(res => {
                        if (res.code == 200) {
                            this.$message.success(res.msg)
                            return this.$router.back();
                        } else {
                            return this.$message.error(res.msg)
                        }
                    })
                } else {
                    this.$post(api.url, this.info).then(res => {
                        if (res.code == 200) {
                            this.$message.success(res.msg)
                            return this.$router.back();
                        } else {
                            return this.$message.error(res.msg)
                        }
                    })
                }
            },
            get_info() {
                this.$get(this.$api.houseOption + '/' + this.id).then(res => {
                    this.info = res.data;
                    console.log(this.info);
                })
            },

            remove(key) {
                if (this.info.values.length === 1) {
                    return false;
                }

                this.info.values.splice(key, 1)
            },

            add() {
                this.info.values.push('');
            },

            // 获取数据
            onload() {
                // 判断你是否是编辑
                if (!this.$isEmpty(this.$route.params.id)) {
                    this.id = this.$route.params.id;
                    this.get_info();
                }
            },
        },
        created() {
            this.onload();
        },
        mounted() {
        }
    };
</script>
<style lang="scss" scoped>
</style>
